<template>
  <el-dialog
    v-model="visible"
    :show-close="false"
    :close-on-click-modal="true"
    width="600px"
    class="search-dialog"
  >
    <div class="search-container">
      <div class="search-header">
        <h2>搜索</h2>
        <el-icon class="close-icon" @click="handleClose"><Close /></el-icon>
      </div>
      
      <div class="search-input">
        <el-input
          v-model="searchText"
          placeholder="请输入搜索内容"
          :prefix-icon="Search"
          clearable
        />
      </div>

      <div class="search-content">
        <div class="search-section">
          <div class="section-header">搜索历史</div>
          <div class="section-content history-list">
            <!-- 这里可以循环显示搜索历史 -->
          </div>
        </div>

        <div class="search-section">
          <div class="section-header">
            热门推荐
            <img src="@/assets/images/hot.png" class="hot-icon" alt="hot" style="margin-left: auto;">
          </div>
          <div class="section-content hot-list">
            <div v-for="(item, index) in hotRecommends" :key="index" class="hot-item">
              <span class="hot-index" :class="{'top-three': index < 3}">{{ index + 1 }}</span>
              <span class="hot-title">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Close } from '@element-plus/icons-vue'

const visible = ref(false)
const searchText = ref('')

const hotRecommends = [
  '博客部署教程全流程版',
  '博客开发记录......持续更新',
  'vue3项目页面首次加载慢',
  '博客开发之打字机',
  'git常用方法'
]

const handleClose = () => {
  visible.value = false
}

// 暴露方法给父组件调用
defineExpose({
  visible
})
</script>

<style scoped>
.search-dialog {
  border-radius: 8px;
}

:deep(.el-dialog) {
  margin-top: 15vh !important;
  border-radius: 8px;
}

:deep(.el-dialog__body) {
  padding: 0;
}

.search-container {
  padding: 20px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.close-icon {
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.close-icon:hover {
  color: #666;
}

.search-input {
  margin-bottom: 20px;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: 1px solid #dcdfe6;
}

:deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
}

.search-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  width: 100%;
}

.hot-icon {
  width: 16px;
  height: 16px;
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.hot-item:hover .hot-title {
  color: var(--el-color-primary);
}

.hot-index {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}

.hot-index.top-three {
  color: #ff4757;
  font-weight: bold;
}

.hot-title {
  font-size: 14px;
  color: #333;
  transition: color 0.3s;
}
</style> 